<template>
  <div>
    <van-nav-bar
      title="修改用户资料"    
      left-arrow   
      class="page-nav-bar"
      @click-left="$router.back()"
    />

        <van-field
          name="uploader"
          label="选择头像"
          :rules="[{ required: true, message: '请上传封面图片' }]"
        >
          <template #input>
            <van-uploader
              v-model="icon"
              max-count="1"
              :after-read="afterRead"
            />
          </template>
        </van-field>

  <van-field v-model="username" name="昵称" label="昵称" placeholder="用户昵称"/>
  <van-field v-model="notes" name="个性宣言" label="个性宣言" placeholder="用户个性宣言"/>
  <van-field v-model="mobile" name="手机号" label="手机号" placeholder="手机号"/>

    <van-field name="radio" label="性别">
    <template #input>
      <van-radio-group v-model="sex" direction="horizontal">
      <van-radio name="0">男 </van-radio>
      <van-radio name="1">女 </van-radio>·
      </van-radio-group>
      </template>
    </van-field>
  <!-- 时间 -->
    <van-field
      readonly
      clickable
      name="datetimePicker"
      :value="birthday"
      label="生日"
      placeholder="生日"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- 地址 -->
    <van-field
      readonly
      clickable
      name="area"
      :value="address"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onCondizhi"
        @cancel="showArea = false"
      />
    </van-popup>

  <van-button type="info" block round @click="tijiao">提交</van-button>
  
  </div>
</template>

<script >
import {xguser} from "../../api/user"
import {uploadImage } from "../../api/add";
import { areaList } from '@vant/area-data';
import {getUserInfo} from '@/api/login'
export default {
  data() {
    return {
      sex:'0',//性别
      icon: [],//头像
      username: '',//用户名
      notes:'',//个性宣言
      mobile: '',//手机号
      birthday: '',//时间
      showPicker: false,
      address: '',//地址
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 12, 31),
      currentDate: new Date(),
      d:0,
      
      required:{
        mobile:'',
        icon:'',
        address:'',
        notes:'',
        sex:'',
        password:'111111',
        id:'',
        birthday:'',
        username:'',

      }
    };
  },
  created(){
    this.loadUserInfo()
  },
   methods: {
    onConfirm(data) {
      console.log(data);
      this.d = data;  
      this.birthday = this.d.getFullYear() + '-' + (this.d.getMonth() + 1) + '-' + this.d.getDate();
      this.showPicker = false;
    },
    afterRead(file) {
      console.log(file.file);
      const data = new FormData();
      data.append("file", file.file);
      uploadImage(data).then((resp) => {
        console.log(resp);
        this.icon[0].url = resp.data.data.savePath;
        console.log(this.icon);
      });
    },
     onCondizhi(values) {
      this.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
    async loadUserInfo(){
      try {
        let {data} =await getUserInfo()
        this.required.id=data.data.userInfo.id
        this.required.password=data.data.userInfo.password
        console.log(this.password);
      } catch (error) {
        console.log(error);
      }
    },
   async tijiao(){
   try {
    this.required.mobile=this.mobile
    this.required.icon=this.icon[0].url
    this.required.username=this.username
    this.required.sex=this.sex
    this.required.birthday=this.birthday
    this.required.address=this.address
    this.required.notes=this.notes

      let {data} =await xguser(this.required)
      console.log(data);
    } catch (error) {
      this.$toast.fail('失败')
      console.log(error);
    }
      this.$toast.success('成功')
      console.log(this.password);
    }
    
  },
};
</script>

<style >
span{
  color: black;
}
.van-button--block{
  width: 90%!important;
  margin-left: 5%!important;
}
</style>